<template>
	<view class="content">
		<view v-if="barshow" class="bar" :style="{height:topheight}"></view>
		<view class="top">
			<view class="user" @click="user">
				<image :src="userInfo.user_pic"></image>
				<view class="user_text">
					<view class="user_name">{{userInfo.short_name}}</view>
					<view class="user_tel"><uni-icons color="white" type="phone"
							size="24"></uni-icons>{{userInfo.mobile}}
					</view>
				</view>
				<image src="@/static/img/me_edit.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="money">
			<!-- <view class="m_title">可用额度</view>
			<view class="m_num"><text>￥</text>{{userInfo.quota}}</view> -->
			<view class="m_lr">
				<view class="m_item m_l">
					<view>放款金额</view>
					<view><text>￥</text>{{userInfo.loan_money}}</view>
				</view>
				<view class="line"></view>
				<view class="m_item" @click="record(2)">
					<view>我的待还利息</view>
					<view><text>￥</text>{{userInfo.company_interest}}</view>
				</view>
			</view>
			<view class="default_btn m_btn" @click="topup">对账</view>
			<view class="hint" @click="record(1)">对账记录</view>
			<!-- <view class="m_btns">
				<view class="" @click="topup">充值</view>
				<view class="" @click="extract">提现</view>
			</view> -->
		</view>
		<view class="keyong">
			<view class="ke_item mt_30">
				<image src="@/static/img/me_img7.png" mode="widthFix"></image>
				<view class="">
					<view>可用额度</view>
					<view class="ke_top"><text>￥</text>{{userInfo.quota}}</view>
				</view>
			</view>
			<view class="shenk" v-if="userInfo.quota_apply>0">
				<view>待审核额度</view>
				<view><text>￥</text>{{userInfo.quota_apply}}</view>
			</view>
			<view class="ke_d">
				<view class="ke_items">
					<view class="ke_item">
						<image src="@/static/img/me_img10.png" mode="widthFix"></image>
						<view class="">
							<view>用户已还本金</view>
							<view class="ke_money"><text>￥</text>{{userInfo.true_self_money}}</view>
						</view>
					</view>
					<view class="ke_item">
						<image src="@/static/img/me_img8.png" mode="widthFix"></image>
						<view class="">
							<view>用户待还本金</view>
							<view class="ke_money"><text>￥</text>{{userInfo.dai_self_money}}</view>
						</view>
					</view>
					<view class="ke_item">
						<image src="@/static/img/me_img12.png" mode="widthFix"></image>
						<view class="">
							<view>总借款金额</view>
							<view class="ke_money"><text>￥</text>{{userInfo.self_money}}</view>
						</view>
					</view>
					<view class="ke_item" @click="other()">
						<image src="@/static/img/me_img14.png" mode="widthFix"></image>
						<view class="">
							<view>其他收入</view>
							<view class="ke_money"><text>￥</text>{{userInfo.other_income}}</view>
						</view>
					</view>
				</view>
				<view class="ke_items">
					<view class="ke_item">
						<image src="@/static/img/me_img11.png" mode="widthFix"></image>
						<view class="" @click="toRecord(3)">
							<view>用户已还利息</view>
							<view class="ke_money"><text>￥</text>{{userInfo.true_interest_money}}</view>
						</view>
					</view>
					<view class="ke_item">
						<image src="@/static/img/me_img9.png" mode="widthFix"></image>
						<view class="">
							<view>用户待还利息</view>
							<view class="ke_money"><text>￥</text>{{userInfo.dai_interest_money}}</view>
						</view>
					</view>
					<view class="ke_item">
						<image src="@/static/img/me_img13.png" mode="widthFix"></image>
						<view class="">
							<view>总利息金额</view>
							<view class="ke_money"><text>￥</text>{{userInfo.interest_money}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="item">
			<view class="i_title">借款管理</view>
			<view class="img_lr">
				<view class="img_l" @click="repay">偿还贷款</view>
				<view class="img_r" @click="loans">我的客户</view>
			</view>
			<view class="img_d" @click="statistics">贷款统计</view>
		</view>
		<view class="item" v-if="false">
			<view class="i_title">账户管理</view>
			<view class="i_imgs">
				<view @click="toCard()">
					<image src="@/static/img/me_img4.png" mode="widthFix"></image>
					<view class="">银行卡</view>
				</view>
				<view @click="toWeixin()">
					<image src="@/static/img/me_img5.png" mode="widthFix"></image>
					<view class="">微信</view>
				</view>
				<view @click="toAlipay()">
					<image src="@/static/img/me_img6.png" mode="widthFix"></image>
					<view class="">支付宝</view>
				</view>
			</view>
		</view>

		<view class="item">
			<view class="i_title">其他服务</view>
			<view class="other" @click="authentication">
				<image src="@/static/img/me_icon1.png" mode="widthFix"></image>
				<text class="text">认证信息</text>
				<uni-icons color="#999999" type="right" size="24"></uni-icons>
			</view>
			<view class="other" @click="safety">
				<image src="@/static/img/me_icon2.png" mode="widthFix"></image>
				<text class="text">安全信息</text>
				<uni-icons color="#999999" type="right" size="24"></uni-icons>
			</view>
			<!-- <view class="i_title" @click="loginOut">退出登录</view> -->
		</view>
	</view>
</template>

<script>
	import {
		userInfo
	} from '@/common/js/index.js'
	export default {
		data() {
			return {
				title: 'Hello',
				topheight: uni.getStorageSync('topHeight'),
				totalheight: uni.getStorageSync('totalHeight'),
				navheight: uni.getStorageSync('navHeight'),
				barshow: false,
				userInfo: '',
			}
		},
		onLoad() {
			// this.userinfo()
		},
		onShow() {
			this.userinfo()
		},
		methods: {
			other(e) {
				uni.navigateTo({
					url: '/pages/me/other'
				})
			},
			toRecord(e) {
				uni.navigateTo({
					url: '/pages/me/record?type='+e
				})
			},
			record(e) {
				uni.navigateTo({
					url: '/pages/me/topupRecord?type='+e
				})
			},
			loginOut() {
				uni.setStorageSync('token', '')
			},
			userinfo() {
				userInfo().then(res => {
					this.userInfo = res.data
					uni.setStorageSync('userInfo',this.userInfo)
					console.log(res);
				})
			},
			// 账户管理-银行卡
			toCard() {
				uni.navigateTo({
					url: '/pages/me/card'
				})
			},
			// 账户管理-微信
			toWeixin() {
				uni.navigateTo({
					url: '/pages/me/weixin'
				})
			},
			// 账户管理-支付宝
			toAlipay() {
				uni.navigateTo({
					url: '/pages/me/alipay'
				})
			},
			safety() {
				uni.navigateTo({
					url: '/pages/me/safety'
				})
			},
			authentication() {
				uni.navigateTo({
					url: '/pages/me/authentication'
				})
			},
			extract() {
				uni.navigateTo({
					url: '/pages/me/extract'
				})
			},
			topup() {
				uni.navigateTo({
					url: '/pages/me/topup'
				})
			},
			user() {
				uni.navigateTo({
					url: '/pages/me/userInfo'
				})
			},
			repay() {
				uni.navigateTo({
					url: '/pages/me/repay'
				})
			},
			statistics() {
				uni.navigateTo({
					url: '/pages/me/loansStatistics'
				})
			},
			loans() {
				// uni.navigateTo({
				// 	url: '/pages/me/loans'
				// })
				uni.switchTab({
					url: '/pages/me/client'
				})
			},
		},
		onPageScroll(e) {
			if (e.scrollTop > 48) {
				this.barshow = true
			} else {
				this.barshow = false
			}
		},
	}
</script>

<style scoped lang="scss">
	.content {
		/* background: white; */
		position: relative;
		overflow: hidden;
	}

	.top {
		// width: 740rpx;
		height: 386rpx;
		// padding: 0 30rpx;
		background: url('../../static/img/me_bg.png') no-repeat;
		background-size: contain;
		overflow: hidden;

		.user {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 120rpx 30rpx 0;

			.user_text {
				flex: 1;
				margin-left: 20rpx;
				color: white;

				.user_name {
					font-weight: 500;
					font-size: 28rpx;
				}

				.user_tel {
					display: flex;
					margin-top: 20rpx;
					align-items: center;
					font-size: 24rpx;
				}
			}

			image {
				&:nth-of-type(1) {
					width: 112rpx;
					height: 112rpx;
					border-radius: 50%;
				}

				&:nth-of-type(2) {
					width: 48rpx;
				}
			}
		}
	}

	.money {
		height: 380rpx;
		margin: -124rpx 30rpx 0;
		padding: 0 30rpx;
		background: url('../../static/img/me_bg4.png') no-repeat;
		background-size: cover;
		overflow: hidden;

		.m_title {
			font-size: 28rpx;
			margin: 36rpx 0 24rpx;
		}

		.m_num {
			height: 86rpx;
			line-height: 86rpx;
			font-size: 60rpx;
			font-weight: 700;

			text {
				font-size: 28rpx;
			}
		}

		.m_lr {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 40rpx 0;

			.line {
				// width: 1rpx;
				height: 52rpx;
				border-right: 2rpx solid #DDDDDD;
			}

			.m_l {
				margin-left: 0;
			}

			.m_item {

				flex: 1;
				text-align: center;

				view {
					&:nth-of-type(1) {}

					&:nth-of-type(2) {
						height: 58rpx;
						line-height: 58rpx;
						margin-top: 20rpx;
						margin-right: 30rpx;
						font-weight: 500;
						font-size: 40rpx;

						text {
							font-size: 28rpx;
						}
					}
				}
			}
		}

		.m_btn {
			width: 310rpx;
			margin-top: 48rpx;
		}

		.m_btns {
			display: flex;
			justify-content: space-between;
			margin: 0 10rpx;

			view {
				width: 260rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;

				&:nth-of-type(1) {
					background: #E99552;
				}

				&:nth-of-type(2) {
					background: linear-gradient(270deg, #FF5F3B 0%, #FF524F 100%);
				}
			}
		}

		.hint {
			color: #3F93FF;
			font-size: 26rpx;
			text-align: center;
			margin-top: 20rpx;
		}
	}

	.keyong {
		// height: 668rpx;
		margin: 40rpx 30rpx 0;
		padding: 0 30rpx;
		background: white url('../../static/img/me_bg5.png') no-repeat;
		background-size: contain;
		overflow: hidden;
		border-radius: 8rpx;
		position: relative;
		
		.shenk {
			// background-color: palegoldenrod;
			position: absolute;
			top: 70rpx;
			right: 70rpx;
			view {
				font-size: 26rpx;
				&:nth-of-type(2){
					color: #666666;
					margin-top: 20rpx;
					font-size: 28rpx;
					text {
						font-size: 26rpx;
					}
				}
			}
		}
		
		.ke_d {
			display: flex;
			justify-content: space-between;
		}

		.ke_items {
			// display: flex;
			// justify-content: space-between;
			// margin: 50rpx 0 60rpx;

			// .ke_item:nth-of-type(2) {
			// 	margin-left: 30rpx;
			// }
			.ke_item {
				margin: 40rpx 0 60rpx;
			}
		}

		.ke_item {
			flex: 1;
			display: flex;
			align-items: center;

			image {
				display: block;
				width: 56rpx;
				margin-right: 20rpx;
			}

			.ke_top {
				font-size: 60rpx;
				font-weight: 700;
				margin-top: 30rpx;

				text {
					font-size: 28rpx;
				}
			}

			.ke_money {
				font-size: 36rpx;
				font-weight: 500;
				margin-top: 10rpx;

				text {
					font-size: 28rpx;
				}
			}
		}

		.mt_30 {
			margin-top: 40rpx;
		}
	}

	.item {
		margin: 40rpx 30rpx;
		padding: 30rpx;
		background-color: white;
		border-radius: 12rpx;

		.i_title {
			height: 46rpx;
			line-height: 46rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
		}

		.img_lr {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 30rpx;

			view {
				width: 266rpx;
				height: 132rpx;
				line-height: 132rpx;
				border-radius: 12rpx;
				font-weight: 500;
				padding-left: 30rpx;
			}

			.img_l {
				background: url('@/static/img/me_img1.png') no-repeat;
				background-size: cover;
				color: #FF8089;
			}

			.img_r {
				background: url('@/static/img/me_img2.png') no-repeat;
				background-size: cover;
				color: #FF926B;
			}
		}

		.img_d {
			width: 600rpx;
			padding-left: 30rpx;
			height: 104rpx;
			line-height: 104rpx;
			font-weight: 500;
			margin-top: 20rpx;
			background: url('@/static/img/me_img3.png') no-repeat;
			background-size: cover;
			color: #70B7FF;
		}

		.i_imgs {
			display: flex;
			padding: 0 30rpx;
			justify-content: space-between;
			margin-top: 30rpx;

			image {
				width: 72rpx;
				margin-bottom: 12rpx;
			}
		}

		.other {
			height: 118rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 2rpx solid #EEEEEE;

			image {
				width: 48rpx;
				margin-right: 20rpx;
			}

			.text {
				flex: 1;
			}
		}
	}

	.bar {
		width: 100vw;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
		animation: bg 0.8s 1 both linear;
		background-color: red;
	}

	@keyframes bg {
		0% {
			background-color: rgba(255, 90, 65, 0.1);
		}

		50% {
			background-color: rgba(255, 90, 65, 0.5);
		}

		100% {
			background-color: rgba(255, 90, 65, 1);
		}
	}
</style>